<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="../../../../lib/html5shiv.js?rev=@@hash"></script>
    <script type="text/javascript" src="../../../../lib/respond.min.js?rev=@@hash"></script>
    <![endif]-->
    <!--引入分页-->
    <link rel="stylesheet" href="../../../../lib/pagination/pagination.css">
    <link rel="stylesheet" type="text/css" href="../../../../static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../../../static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="../../../../lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../../../../static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="../../../../static/h-ui.admin/css/style.css"/>
    <!--表单验证-->
    <link rel="stylesheet" type="text/css" href="../../../../lib/Validform/5.3.2/style.css" />
    <link rel="stylesheet" type="text/css" href="../../../../ht-css/Project.css"/>
    <link rel="stylesheet" href="../../../../ht-css/combo.select.css">
    <!--[if IE 6]>
    <script type="text/javascript" src="../../../../lib/DD_belatedPNG_0.0.8a-min.js?rev=@@hash"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="../../../../ht-css/style-q.css"/>
    <title>积分商品详情</title>
    <style>
        html {
            zoom: .80
        }
        .imgTable .formControls{float: left;}
    </style>
</head>
<body>
<article class="page-container">
    <div class="ml-20 mr-20" id="integralSkuInfo" method="post">
        <div id="tab_topnav" class="HuiTab">
            <div class="tabBar clearfix"><span>积分商品信息</span><!--<span>商品图片管理</span>--></div>
            <!--SPU详情-->
            <div class="tabCon bg-1 bk-gray pd-20 mb-20">
                <div class="va-m lh-20 f-16 pb-15">
                    <strong>基础信息</strong>
                </div>
                <div class="line"></div>
                <div class="pd-20">
                    <span hidden="true" id="integralSkuId"></span>
                    <div class="mb-15" style="margin-left: 13px;"> 商品编码：<span style="margin-left: 12px;" id="integralSkuCode"></span></div>
                    <div class="clearfix mb-15"><span class="c-red pr-5 f-l">*</span><label class="f-l">商品名称：</label>
                        <div class="formControls col-sm-5" style="    margin-left: -9px;">
                            <input type="text" class="input-text radius ml-10 w-180" name="integralSkuName" id="integralSkuName"
                                   placeholder="输入积分商品名称"
                                   oninput="this.value = (this.value.replace(/\s/g,'')).substring(0,50)"
                                   datatype="*0-50" errormsg="最大长度为50个字符"
                                   ignore="ignore">
                        </div>
                    </div>
                    <div class="clearfix mb-15" style="margin-left: 11px;">
                        <label class="f-l">商品描述：</label>
                        <div class="formControls col-sm-5"><textarea name="remark" class="textarea" id="remark"
                                                                     oninput="this.value = this.value.substring(0,100)"
                                                                     datatype="*0-100" errormsg="最大长度为100个字符"></textarea></div>
                        <span class="remarkErrorMsg hide" style="color: red;">超出字符限制[100]</span>
                    </div>
                    <div class="clearfix mb-15">
                        <span class="c-red pr-5 f-l">*</span><label class="f-l">计量单位：</label>
                        <div class="formControls col-sm-2"><input name="unit" type="text" id="unit" class="text"
                                                                  oninput="this.value = (this.value.replace(/\s/g,'').replace(/[0-9]/ig,''))"
                                                                  onblur="checkUnitValue(this.value)"
                                                                /></div>
                        <span class="formControls col-sm-5">可输入汉字/特殊符号/字母，最多不超过6个字符</span>
                    </div>
                </div>


                <div class="va-m lh-20 f-16 pb-15">
                    <strong>图片信息</strong>
                </div>
                <div class="line"></div>
                <div class="mt-15 mb-30 imgTable clearfix" style="    margin-left: 152px;">
                <div class="formControls f-l" >
                    <span class="f-l ml-10">主图1</span>
                        <input class="f-l ml-10 pictures1" oninput="pictures(this,1)" value="1" style="width: 32px;display: none" >
                </div>
                    <div class="formControls f-l" style="margin-left: 98px;">
                        <input class="f-l ml-10 pictures2" oninput="pictures(this,2)" value="2" style="width: 32px;" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
                    </div>
                    <div class="formControls f-l" style="margin-left: 93px;">
                        <input class="f-l ml-10 pictures3" oninput="pictures(this,3)" value="3" style="width: 32px;" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
                    </div>
                    <div class="formControls f-l" style="margin-left: 93px;">
                        <input class="f-l ml-10 pictures4" oninput="pictures(this,4)" value="4" style="width: 32px;" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
                    </div>
                    <div class="formControls f-l" style="margin-left: 98px;">
                        <input class="f-l ml-10 pictures5" oninput="pictures(this,5)" value="5" style="width: 32px;" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
                    </div>
                    <div class="formControls f-l" style="margin-left: 85px;">
                        <span class="f-l ml-10">批量上传</span>
                    </div>
                </div>
                <div class="mt-15 mb-30 imgTable clearfix">
                    <div class="formControls f-l">
                        <span><span class="c-red pr-5 f-l">*</span>
                            上传主图：<br/>支持jpg、<br/>jpeg、png格式<br/>不超过1M
                        </span>
                    </div>
                    <div class="formControls f-l"><img onclick="addBtn(1)" class="f-l ml-10" style="width: 131px;height: 131px;" id="myImg1" src="../../../../img/tianjia.png">
                       <input id="fileUp1" type="file" accept=".jpg,.jpeg,.png" onchange="putDataToPage(event,1)" style="display: none"></div>
                    <div class="formControls f-l"><img onclick="addBtn(2)" class="f-l ml-10" style="width: 131px;height: 131px;" id="myImg2" src="../../../../img/tianjia.png">
                        <input id="fileUp2" type="file" accept=".jpg,.jpeg,.png" onchange="putDataToPage(event,2)" style="display: none"></div>
                    <div class="formControls f-l"><img onclick="addBtn(3)" class="f-l ml-10" style="width: 131px;height: 131px;" id="myImg3" src="../../../../img/tianjia.png">
                        <input id="fileUp3" type="file" accept=".jpg,.jpeg,.png" onchange="putDataToPage(event,3)" style="display: none"></div>
                    <div class="formControls f-l"><img onclick="addBtn(4)" class="f-l ml-10" style="width: 131px;height: 131px;" id="myImg4" src="../../../../img/tianjia.png">
                        <input id="fileUp4" type="file" accept=".jpg,.jpeg,.png" onchange="putDataToPage(event,4)" style="display: none"></div>
                    <div class="formControls f-l"><img onclick="addBtn(5)" class="f-l ml-10" style="width: 131px;height: 131px;" id="myImg5" src="../../../../img/tianjia.png">
                        <input id="fileUp5" type="file" accept=".jpg,.jpeg,.png" onchange="putDataToPage(event,5)" style="display: none"></div>
                    <div class="formControls f-l"><img multiple="multiple" onclick="bulkaddBtn()" class="f-l ml-10" style="width: 131px;height: 131px;" src="../../../../img/tianjia.png">
                        <input id="fileUp" type="file" multiple="multiple"  accept=".jpg,.jpeg,.png" onchange="bulkUpload(event,this)" style="display: none"></div>
                </div>

                <div class="mt-15 mb-30 imgTable clearfix" style="width: 804px;margin-left: 123px;height: 27px;">
                    <div class="formControls" style="height: 27px;width: 148px;" >
                        <a class=" ml-10" id="addBtn1" style="color: floralwhite;"  onclick="addBtn(1)" >更换</a><a id="deleteimg1" style="color: floralwhite;" class="ml-10" onclick="deleteimg(1)">删除</a>

                    </div>
                    <div class="formControls " style="height: 27px;width: 143px;" >
                        <a class="ml-10" id="addBtn2"  style="color: floralwhite;" onclick="addBtn(2)">更换</a><a id="deleteimg2" style="color: floralwhite;" class=" ml-10" onclick="deleteimg(2)">删除</a>

                    </div>

                    <div class="formControls" style="height: 27px;width: 144px;">
                        <a class=" ml-10" id="addBtn3"  style="color: floralwhite;" onclick="addBtn(3)">更换</a><a id="deleteimg3" style="color: floralwhite;" class=" ml-10" onclick="deleteimg(3)">删除</a>

                    </div>
                    <div class="formControls " style="height: 27px;width: 141px;" >
                        <a class=" ml-10" id="addBtn4"  style="color: floralwhite;" onclick="addBtn(4)">更换</a><a id="deleteimg4" style="color: floralwhite;" class=" ml-10" onclick="deleteimg(4)">删除</a>

                    </div>
                    <div class="formControls " style="height: 27px;width: 199px;" >
                        <a class=" ml-10" id="addBtn5"  style="color: floralwhite;" onclick="addBtn(5)">更换</a><a id="deleteimg5" style="color: floralwhite;" class="ml-10" onclick="deleteimg(5)">删除</a>

                    </div>

                </div>
                <div class="va-m lh-20 f-16 pb-15">
                    <strong>详情信息</strong>
                </div>
                <div class="line"></div>
                <div class="pd-20">
                    <script id="editor" type="text/plain" style="width: 100%; height: 500px"></script></div>
                <div class="text-c mb-10">
                    <input id="sureBtn" type="button" onclick="makeSure()" class="btn btn-secondary radius size-S botter" value="&nbsp;确&nbsp;&nbsp;认&nbsp;">
                    <input type="button" class="btn radius size-S botter ml-10" onclick="cancleSpu()" value="&nbsp;取&nbsp;&nbsp;消&nbsp;">
                </div>
                <input id="forJsFileBtn" type="file" accept="image/vnd.sealedmedia.softseal-jpg,image/jpeg,image/png" onchange="forJsFileBtn(event)" style="display: none"/>
            </div>
        </div>
    </div>
    </div>
</article>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="../../../../lib/jquery/1.9.1/jquery.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../lib/layer/2.4/layer.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../static/h-ui/js/H-ui.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../static/h-ui.admin/js/H-ui.admin.js?rev=@@hash"></script> <!--/_footer 作为公共模版分离出去-->
<!--表单验证-->
<script type="text/javascript" src="../../../../lib/jquery.validation/1.14.0/jquery.validate.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../lib/jquery.validation/1.14.0/validate-methods.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../lib/datatables/1.10.0/jquery.dataTables.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../lib/laypage/1.2/laypage.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../lib/Validform/5.3.2/Validform_v5.3.2_min.js?rev=@@hash"></script>
<script src="../../../../lib/pagination/jquery.pagination.js?rev=@@hash"></script>
<script src="../../../../ht-js/frame/doT.min.js?rev=@@hash"></script>
<script src="../../../../ht-js/public.js?rev=@@hash"></script>
<!--验证token-->
<script src="../../../../ht-js/verifyToken.js?rev=@@hash"></script>
<script src="../../../../ht-js/memberCentre/IntegralMall/integral-sku-info.js?rev=@@hash"></script>
<script src="../../../../ht-js/goods/pictures.js?rev=@@hash"></script>
<script src="../../../../ht-js/dynamicWarehouse.js?rev=@@hash"></script>
<!--富文本编辑器-->
<script type="text/javascript" charset="utf-8" src="../../../../lib/ueditor/1.4.3/ueditor.config.js?rev=@@hash"></script>
<script type="text/javascript" charset="utf-8" src="../../../../lib/ueditor/1.4.3/ueditor.all.min.js?rev=@@hash"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="../../../../lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js?rev=@@hash"></script>

<script>

    var skuFormData = new FormData();
    var integralSkuCode = sessionStorage.getItem("integralSkuCode");
    var spuImgCount = 0;
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor',{
        toolbars: [
            [
                'source', //源代码
                'anchor', //锚点
                'undo', //撤销
                'redo', //重做
                'bold', //加粗
                'indent', //首行缩进
                // 'snapscreen', //截图
                'italic', //斜体
                'underline', //下划线
                'strikethrough', //删除线
                'subscript', //下标
                'fontborder', //字符边框
                'superscript', //上标
                'formatmatch', //格式刷

                'blockquote', //引用
                'pasteplain', //纯文本粘贴模式
                'selectall', //全选
                'print', //打印
                'preview', //预览
                'horizontal', //分隔线
                'removeformat', //清除格式
                'time', //时间
                'date', //日期
                'unlink', //取消链接
                'insertrow', //前插入行
                'insertcol', //前插入列
                'mergeright', //右合并单元格
                'mergedown', //下合并单元格
                'deleterow', //删除行
                'deletecol', //删除列
                'splittorows', //拆分成行
                'splittocols', //拆分成列
                'splittocells', //完全拆分单元格
                'deletecaption', //删除表格标题
                'inserttitle', //插入标题
                'mergecells', //合并多个单元格
                'deletetable', //删除表格
                'cleardoc', //清空文档
                'insertparagraphbeforetable', //”表格前插入行”
                'insertcode', //代码语言
                'fontfamily', //字体
                'fontsize', //字号
                'paragraph', //段落格式
                /*'simpleupload', //单图上传
                'insertimage', //多图上传*/
                'edittable', //表格属性
                'edittd', //单元格属性
                'link', //超链接
                'emotion', //表情
                'spechars', //特殊字符
                'searchreplace', //查询替换
                'map', //Baidu地图
                'gmap', //Google地图
                'insertvideo', //视频
                'help', //帮助
                'justifyleft', //居左对齐
                'justifyright', //居右对齐
                'justifycenter', //居中对齐
                'justifyjustify', //两端对齐
                'forecolor', //字体颜色
                'backcolor', //背景色
                'insertorderedlist', //有序列表
                'insertunorderedlist', //无序列表
                'fullscreen', //全屏
                'directionalityltr', //从左向右输入
                'directionalityrtl', //从右向左输入
                'rowspacingtop', //段前距
                'rowspacingbottom', //段后距
                'pagebreak', //分页
                'insertframe', //插入Iframe
                'imagenone', //默认
                'imageleft', //左浮动
                'imageright', //右浮动
                // 'attachment', //附件
                'imagecenter', //居中
                'wordimage', //图片转存
                'lineheight', //行间距
                'edittip ', //编辑提示
                'customstyle', //自定义标题
                'autotypeset', //自动排版
                'webapp', //百度应用
                'touppercase', //字母大写
                'tolowercase', //字母小写
                'background', //背景
                'template', //模板
                'scrawl', //涂鸦
                'music', //音乐
                'inserttable', //插入表格
                'drafts', // 从草稿箱加载
                // 'charts', // 图表
            ]
        ]
    });
    UE.registerUI('dialog',function(editor,uiName){
            //创建dialog
//            var dialog = new UE.ui.Dialog({
//                //指定弹出层中页面的路径，这里只能支持页面,因为跟addCustomizeDialog.js相同目录，所以无需加路径
//                iframeUrl:'integralSkuPic.html',
//                //需要指定当前的编辑器实例
//                editor:editor,
//                //指定dialog的名字
//                name:uiName,
//                //dialog的标题
//                title:"请选择图片",
//                //指定dialog的外围样式
//                cssRules:"width:1366px;height:500px;",
//                //如果给出了buttons就代表dialog有确定和取消
//                buttons:[
//                    {
//                        className:'edui-okbutton',
//                        label:'确定',
//                        onclick:function () {
//                            var selectNum = sessionStorage.getItem("selectNum");
//                            if (selectNum != null) {
//                                var selectPic = JSON.parse(sessionStorage.getItem("selectPic"));
//                                var value = "";
//                                for (var i = 0; i < selectPic.length; i++) {
//                                    value += "<img src='" + selectPic[i] + "'>"
//                                }
//                                UE.getEditor('editor').execCommand('insertHtml', value)
//                                sessionStorage.removeItem("selectNum");
//                                sessionStorage.removeItem("selectPic");
//                                dialog.close(true);
//                            } else {
//                                img.show();
//                                if(skuFormData != null){
//                                    if (sessionStorage.getItem("imgFileList") == 0) {
//                                        layer.msg("请选择图片！", {icon: 5,time: 2000});
//                                        return false;
//                                    }
//                                    $.ajax({
//                                        url: root.goodsInter.goods_uploadIntegralSkuImgs,
//                                        cache: false,  //禁用缓存
//                                        type: "POST",
//                                        // 告诉jQuery不要去处理发送的数据
//                                        processData: false,
//                                        // 告诉jQuery不要去设置Content-Type请求头
//                                        contentType: false,
//                                        data: skuFormData,
//                                        success: function (data) {
//                                            if (data.errorCode == 0) {
//                                                img.hide();
//                                                for(var i = 0; i < data.data.length; i++){
//                                                    var value = "<img src='" + data.data[i].imgUrl + "'>";
//                                                    UE.getEditor('editor').execCommand('insertHtml', value)
//                                                }
//                                                dialog.close(true);
//                                            }
//                                        }
//                                    });
//                                }
//                            }
//
//                        }
//                    },
//                    {
//                        className:'edui-cancelbutton',
//                        label:'取消',
//                        onclick:function () {
//                            sessionStorage.removeItem("selectNum");
//                            sessionStorage.removeItem("selectPic");
//                            dialog.close(false);
//                        }
//                    }
//                ]});

            //参考addCustomizeButton.js
            var btn = new UE.ui.Button({
                name:'上传图片',
                title:'上传图片',
                //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
                cssRules :'background-position: -726px -77px;',
                onclick:function () {
                    var forJsFileBtn = $("#forJsFileBtn") ;
                    if (forJsFileBtn){
                        forJsFileBtn.click() ;
                    }
                    //渲染dialog
//                    dialog.render();
//                    dialog.open();
                }
            });

            return btn;
        }
        /*index 指定添加到工具栏上的那个位置，默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/);
    $.ajax({
        contentType:'application/json',
        type: "POST",
        url: root.goodsInter.goods_getIntegralSkuDetail,
        cache: false,  //禁用缓存
        data: JSON.stringify({
            integralSkuCode: integralSkuCode
        }),
        success: function (result) {
            console.log(result)
            if (result.errorCode == 0) {
                sessionStorage.setItem("integralSkuInfo",JSON.stringify(result));
                var integralSkuInfos = JSON.parse(sessionStorage.getItem("integralSkuInfo"));
                $("#integralSkuCode").html(integralSkuInfos.data.integralSkuCode);
                $("#integralSkuName").val(integralSkuInfos.data.integralSkuName);
                $("#remark").val(integralSkuInfos.data.remark);
                $("#unit").val(integralSkuInfos.data.unitName);
                $("#integralSkuId").html(integralSkuInfos.data.integralSkuId);
                var integralSkuImgs = integralSkuInfos.data.integralSkuImgs ;
                if (integralSkuImgs){
                    for(var i = 0; i < integralSkuImgs.length; i++){
                        var val = integralSkuImgs[i].imgSort ;
                        $("#myImg"+val).attr("src", integralSkuImgs[i].imgUrl);
                        $("#myImg"+val).attr("name", integralSkuImgs[i].imgName);
                        $("#myImg"+val).attr("onclick",'picShow('+val+')')
                        //编辑和删除展示
                        $("#addBtn"+val).removeAttr("style")
                        $("#addBtn"+val).attr("style","color: #1476e5")
                        $("#deleteimg"+val).removeAttr("style")
                        $("#deleteimg"+val).attr("style","color: #1476e5")
                    }
                }
                setTimeout(function(){
                    UE.getEditor('editor').setContent(integralSkuInfos.data.detail, false);
                },200);
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest);
        }
    });



    /*tab切换*/
    jQuery.Huitab = function (tabBar, tabCon, class_name, tabEvent, i) {
        var $tab_menu = $(tabBar);
        // 初始化操作
        $tab_menu.removeClass(class_name);
        $(tabBar).eq(i).addClass(class_name);
        $(tabCon).hide();
        $(tabCon).eq(i).show();

        $tab_menu.bind(tabEvent, function () {
            $tab_menu.removeClass(class_name);
            $(this).addClass(class_name);
            var index = $tab_menu.index(this);
            $(tabCon).hide();
            $(tabCon).eq(index).show()
        })
    };
    $(function () {
        $.Huitab("#tab_topnav .tabBar span", "#tab_topnav .tabCon", "current", "click", "0")
    });
    // #tab_demo 父级id
    // #tab_demo .tabBar span 控制条
    // #tab_demo .tabCon 内容区
    // click 事件 点击切换，可以换成mousemove 移动鼠标切换
    // 1	默认第2个tab为当前状态（从0开始）
    function cancleSpu() {
        var ind = parent.layer.getFrameIndex(window.name);
        layer.confirm('确认要取消吗？',function(index){
            parent.layer.close(ind);
            layer.msg('已取消', {icon: 6,time:1000});
        });
    }
    $(function(){
        $("#spuPicForm").Validform({
            tiptype:2,
            callback:function(form){
                img_list();
                return false;
            }
        });
    });
</script>
</body>
</html>